<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- rightIcon="search" @rightClick="rightClick" -->
        <u-navbar bgColor="#fff" :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="培训管理" >
        </u-navbar>
        <uni-select class="uniselect"
            ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select">
        </uni-select>
        <view style="height:74rpx"></view>


        <!-- 版心 -->
        <view class="uni-area">
            <!-- 培训概览 -->
            <view class="u-m-t-50">
                <text class="u-font-32 font-bold">培训概览</text>
                <view class="u-m-t-30 uni-shadow u-flex u-row-around">
                    <view v-for="(item,index) in overview" :key="index" class="u-flex u-flex-col">
                        <text class="u-font-26">{{item.title}}</text>
                        <text class="u-m-t-20 u-font-42 font-bold">{{item.value}}</text>
                    </view>
                </view>
            </view>

            <!-- 培训列表 -->
            <view class="u-m-t-40 u-m-b-30">
                <text class="u-font-32 font-bold">培训列表</text>
                <!-- 列表 -->
                <view v-if="page.total">
                    <view class="u-m-t-30 uni-shadow" v-for="(tem,ind) in page.list" :key="ind">
                        <view class="u-flex u-row-between">
                            <text class="u-font-28 font-bold">{{tem.xmmc}}</text>
                            <u-button class="uni-look-btn" type="warning" :plain="true" shape="circle" text="" @tap="detail(tem.id)">
                                <text class="u-font-24">查看</text>
                            </u-button>
                        </view>
                        <u-row class="u-flex u-flex-wrap">
                            <u-col v-for="(item,index) in tem.list" :key="index" 
                                span="6" class="u-m-t-20 u-font-26" style="flex-direction:row">
                                <text class="u-m-r-20 uni-gery-color">{{item.title}}</text>
                                <text class="u-line-1" style="max-width:60%" @longtap="longTap(item.value)">{{item.value}}</text>
                            </u-col>
                        </u-row>
                    </view>
                </view>
                <!-- 暂无数据 -->
                <view v-else class="u-m-t-30 uni-shadow u-flex u-row-center u-flex-col">
                    <u--image :showLoading="true" src="/static/icons/no.png" width="241rpx" height="241rpx"></u--image>
                    <view class="u-flex u-row-center">
                        <u-icon name="info-circle" size="24" class="u-m-r-20" color="#4E5C70"></u-icon>
                        <text class="u-font-32">暂无数据源</text>
                    </view>
                </view>
            </view>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore v-if="page.total" :status="page.status" />
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                userInfo: uni.getStorageSync('userInfo'),
                // 下拉选择数据
				selectData:[],
                selectPar: {
                    districtId: '',
                    xmtype: '',
                }, 
                // 培训概览
                overview:[
                    { title:'培训次数', value: 0 },
                    { title:'累计人次', value: 0 },
                ],
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        // 页面滚动
        onPageScroll(e){
            this.page.scrollTop = e.scrollTop
        },
        // 页面滚动到底部触发
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.trainList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                this.selectPar.districtId = res.value
                // 项目类型
                this.$tools.getProTypeFn(this,res=>{
                    this.selectData.splice(1,1,res)
                    this.selectPar.xmtype = res.value
                    // 培训概览
                    this.trainOverview()
                    // 培训列表
                    this.trainList()
                })
            })
		},

		methods: {
            back(){
                uni.navigateBack()
            },
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search' })
            },


            
            // 下拉选择
            select(e){
                this.selectPar[e.type] = e.value
                // 培训概览
                this.trainOverview()
                // 培训列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.trainList()
            },


            // 培训概览
            trainOverview(){
                uni.showLoading({ title:'培训概览获取中' })
                this.$request( this,this.$apis.TrainoOerview, this.selectPar ).then(res=>{
                    // console.log('培训概览',res)
                    this.overview[0].value = res.value
                    this.overview[1].value = res.staffs
                }).then()
            },

            // 培训列表
            trainList(){
                this.page.status = 'loading'
                const api = Object.assign(this.selectPar,this.paging)
                this.$request(this,this.$apis.TrainList,api).then(res=>{
                    // console.log('培训列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push({
                                id: v.id,
                                xmmc: v.xmmc, // 项目名称
                                list:[
                                    { title:'培训内容', value: v.kcmc },
                                    { title:'开始时间', value: v.pxksrq },
                                    { title:'培训人数', value: v.pxrs },
                                    { title:'结束时间', value: v.pxjsrq },
                                ]
                            })
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂无更多培训相关数据')
                    }
                }).then()
            },


            // 培训详情
            detail(id){
                uni.navigateTo({ url: '/pages/other-bag/train-detail?id='+id })
            },

            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
    }
</style>
